<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas width="600px" height="420px" id="canvas"></canvas>
<script>
    const ctx = document.querySelector("#canvas").getContext("2d")

    //网格尺寸
    const gridWidth = 30
    const gridHeight = 30

    // 坐标系尺寸
    const width_x = 600
    const height_y = 420

    // 绘制水平线
    for (let i = 0; i < height_y / gridHeight; i++) {
        ctx.beginPath()
        ctx.moveTo(0, i * gridHeight)
        ctx.lineTo(600, i * gridHeight)
        ctx.strokeStyle = '#abacac'
        ctx.stroke()
    }

    // 绘制垂直线
    for (let i = 0; i < width_x; i++) {
        ctx.beginPath()
        ctx.moveTo(i * gridWidth, 0)
        ctx.lineTo(i * gridWidth, 600)
        ctx.strokeStyle = '#abacac'
        ctx.stroke()
    }

    // 坐标轴 y
    ctx.beginPath()
    ctx.moveTo(30, 30)
    ctx.lineTo(30, 390)
    ctx.strokeStyle = 'red'
    ctx.lineWidth = 4
    ctx.stroke()

    // 坐标轴 x
    ctx.beginPath()
    ctx.moveTo(30, 390)
    ctx.lineTo(570, 390)
    ctx.strokeStyle = 'red'
    ctx.lineWidth = 4
    ctx.stroke()

    // 箭头 x
    ctx.beginPath()
    ctx.moveTo(20, 30)
    ctx.lineTo(40, 30)
    ctx.lineTo(30, 16)
    ctx.fillStyle = 'red'
    ctx.fill()

    // 箭头 x
    ctx.beginPath()
    ctx.moveTo(570, 400)
    ctx.lineTo(570, 380)
    ctx.lineTo(586, 390)
    ctx.fillStyle = 'red'
    ctx.fill()

    // 折线
    ctx.beginPath()
    ctx.moveTo(30, 390)
    ctx.lineTo(120, 300)
    ctx.lineTo(220, 220)
    ctx.lineTo(320, 310)
    ctx.lineTo(420, 150)
    ctx.lineTo(520, 170)
    ctx.lineTo(570, 390)
    ctx.lineWidth = 2
    ctx.strokeStyle = 'green'
    ctx.stroke()
</script>
</body>
</html>